<script setup lang="ts">
import { onMounted, ref, computed, ComputedRef, Ref } from 'vue';
import { iPro } from '../utils/homeType';
import { useRouter } from 'vue-router';

const router = useRouter()

// 用来接收父组件传递过来的数据
const { proList } = defineProps({
  proList: Array<iPro>
})

// 切换按钮上的小图标
const iconName: Ref<string> = ref('bars')

// 通过图标来决定当前用样式 1 还是样式 2
const classType: ComputedRef<number> = computed(() => {
  return iconName.value == 'bars' ? 2 : 1
})

// 点击进入详情
function goDetail(proid: string): void {

  // console.log(proid);

  /*
    第一种传参方法：
    通过路由地址进行传递，需要先在路由规则中进行配置 path: '/detail/:proid'
    可以在跳转页面的时候将 id 传递到下一页面中
    在下一页面中可以通过
    import { useRoute } from 'vue-router';
    const route = useRoute()
    console.log(route.params.proid);
    第二种传参方法：
    通过 query 的对象进行传参，将要传递的参数写在 query 这个对象中，可以是一个字符串
    当然也可以为一个数组，如果有特别大的数据就不太建议使用路由进行传递了
    在下一页面中可以通过
    import { useRoute } from 'vue-router';
    const route = useRoute()
    console.log(route.query);
  */
  // 想办法获取到 id
  // 跳转页面可以通过 path 也可以通过 name 进行跳转
  router.push({
    // path: '/detail',
    name: 'detail',
    query: {
      proid,
      name: '涛涛',
      sex: '男',
      list: [1, 2, 3, 4, 5]
    }
  })

}
</script>
<template>
  <!--
    cols_1: 左图右文
    cols_2: 上图下文
   -->
  <ul :class="'proList cols_' + classType">
    <li v-for="item in proList" :key="item.proid" @click="goDetail(item.proid)" class="proItem">
      <div class="itemImage">
        <van-image style="width: 100%; height: 100%;" :src="item.img1" />
      </div>
      <div class="itemInfo">
        <div class="proname van-multi-ellipsis--l2">{{ item.proname }}</div>
        <div class="price">￥{{ item.originprice }}</div>
      </div>
    </li>

    <div class="changeIcon" @click="iconName = iconName == 'bars' ? 'apps-o' : 'bars'">
      <van-icon size="30" :name="iconName" />
      <!-- <van-icon size="30" name="apps-o" /> -->
    </div>
  </ul>
</template>
<style scoped lang="scss">
.cols_1 .proItem {
  height: 1rem;
  display: flex;
  border: 1px solid #f66;
}

.cols_1 .proItem .itemImage {
  width: 1rem;
  height: 1rem;
  padding: 5px;
  box-sizing: border-box;
}

.cols_1 .proItem .itemInfo {
  flex: 1;
  height: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 5px 10px;
}

.cols_1 .proItem .itemInfo .proname {
  font-size: 14px;
}

.price {
  color: #f66;
}

/* 上图 下文 */
.cols_2 {
  display: flex;
  flex-wrap: wrap;
}

.cols_2 .proItem {
  width: 48%;
  margin: 3px 1%;
  border: 1px solid #f66;
  box-sizing: border-box;
}

.cols_2 .proItem .itemImage {
  width: 100%;
  height: 2rem;
}

.cols_2 .proItem .itemInfo {
  line-height: 22px;
  padding: 5px 10px;
  box-sizing: border-box;
}

/* 切换按钮的样式 */
.changeIcon {
  position: fixed;
  bottom: 65px;
  right: 15px;
  width: 36px;
  height: 36px;
  border: 1px solid #f66;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
</style>
